<!-- 搜索框 铺满 -->
<template>
  <div class="search-box">
    <el-autocomplete
      class="inline-input"
      v-model="inputStr"
      :fetch-suggestions="handleSearch"
      placeholder="搜索"
      :trigger-on-focus="false"
      @select="handleSelect"
      :debounce="0"
    ></el-autocomplete>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      inputStr: "",
      restaurants: [
        { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 搜索
    querySearch(queryString, cb) {
      console.log("kaishi sousuo:" + queryString);
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      console.log("results:");
      console.log(results);
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          // restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
          restaurant.value != ""
        );
      };
    },
    handleSelect(item) {
      // console.log('选中');
      // console.log(item.value);
      this.inputStr = ''
      this.$emit("get-id", item.id);
    },
    handleSearch(queryString, cb) {
      console.log("enter search......");
      this.$http.postTest('/search',{ comName: queryString }).then((e) => {
        let data = e.data;
        if (data.errorCode != 0) {
          return console.log("数据有误");
        }
        data.data.forEach((ele) => {
          ele["value"] = ele["comName"];
        });
        this.restaurants = data.data;
        // console.log(this.restaurants);
        this.querySearch(queryString, cb);
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.search-box {
  width: 100%;
  height: 100%;
}
</style>